
<script setup>
import { ref, onMounted } from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()
const images = [
  { src: '/src/assets/gif/1.gif', alt: '1' },
  { src: '/src/assets/gif/2.gif', alt: '2' },
  { src: '/src/assets/gif/9.gif', alt: '9' },
  { src: '/src/assets/gif/4.gif', alt: '4' },
  { src: '/src/assets/gif/5.gif', alt: '5' },
  { src: '/src/assets/gif/6.gif', alt: '6' },
  { src: '/src/assets/gif/7.gif', alt: '7' },
    { src: '/src/assets/gif/8.gif', alt: '8' },
];
const MagicClick = () => {
  return router.push('/magic')
}

// 组件挂载完成后初始化方块数据
onMounted(() => {
  initBoxes()
})
const isActive = ref(false)
const boxes = ref([])
// 初始化方块数据
const initBoxes = () => {
  const newBoxes = []
  // 方块的位置
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      // 方块的编号
      newBoxes.push({ i, j })
    }
  }
  boxes.value = newBoxes
}
// 切换方块的状态
const handleChange = () => {
  isActive.value = !isActive.value
}

</script>

<template>

<!--  3D相框效果 -->
  <div class="magic">
    <div>
      <el-button class="button" type="primary" plain @click="handleChange" >⏪ Change</el-button>
      <el-button id="a" class="button" type="primary" plain @click="MagicClick">MagicPhoto ⏩</el-button>
    </div>
    <div :class="['boxes', { 'big': isActive }]">
      <div
          v-for="(box, index) in boxes"
          :key="index"
          class="box"
          :style="{
          backgroundPosition: `${-box.j * 125}px ${-box.i * 125}px`
        }"
      ></div>
    </div>
  </div>


<!--  百叶窗效果 -->
  <div class="container">
    <div class="inner" v-for="(img, index) in images" :key="index">
      <img :src="img.src" :alt="img.alt" />
    </div>
  </div>
  <el-button class="button" type="primary" plain @click="router.push('/game')">⏫ PlayGame</el-button>

</template>


<style scoped>
.magic {
  box-shadow: 5px 5px 30px #64cceb;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 50px 0;
  padding: 50px;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 500px;
  height: 500px;
  position: relative;
  transition: 0.7s ease;
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
}

.boxes.big {
  width: 520px;
  height: 520px;
}

.boxes.big .box {
  transform: rotateZ(360deg);
}

.box {
  background-image: url('/src/assets/gif/5.gif');
  background-repeat: no-repeat;
  background-size: 500px 500px;
  position: relative;
  width: 125px;
  height: 125px;
  transition: 0.7s ease;
}

.box::after {
  content: '';
  background-color: #f6e58d;
  position: absolute;
  top: 8px;
  right: -15px;
  height: 100%;
  width: 15px;
  transform: skewY(45deg);
}

.box::before {
  content: '';
  background-color: #f9ca25;
  position: absolute;
  bottom: -15px;
  left: 8px;
  height: 15px;
  width: 100%;
  transform: skewX(45deg);
}
.container {
  width: 1000px;
  height: 400px;
  display: flex;
}

img {
  width: 400px;
  border-radius: 10px;
}

.container .inner {
  overflow: hidden;
  transition: all 1s;
}

.container .inner:hover {
  /* 鼠标浮动到元素上之后就会使该元素不会进行伸缩，及恢复原来宽度 */
  flex-shrink: 0;
  box-shadow: 10px 10px 30px rgb(31, 185, 246);
  border: 3px solid #1fb9f6;
  transform: scale(1.1);
  border-radius: 10px;
}

.button {
  margin: 30px;
  background-color: #f58383;
  color: #fff;
  border-radius: 10px;
  padding: 30px 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

</style>